import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const NgSwitchView = defineView({
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {angular.WIScope} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
    }

    items = ["settings", "home", "options", "other"];

    selection = this.items[0];

    handleClick() {
      console.log("NgSwitchView", this);
    }
  },
  controllerAs: "$c",
  template: /* HTML */ html`
    <div>
      <select
        ng-model="$c.selection"
        ng-options="item for item in $c.items"
      ></select>
      <code>selection={{$c.selection}}</code>
      <hr />
      <div class="animate-switch-container" ng-switch on="$c.selection">
        <div
          class="animate-switch"
          ng-switch-when="settings|options"
          ng-switch-when-separator="|"
        >
          1Settings Div
        </div>
        <div class="animate-switch" ng-switch-when="home">2Home Span</div>
        <div class="animate-switch" ng-switch-default>3default</div>
      </div>
    </div>
    ${DebugButtonHTML("$c")}
  `,
});

export default NgSwitchView;
